<template>
	<view class="">
		<view class="pore" style="z-index: 999;">
			<u-navbar title="美食" bgColor="transparent" @leftClick="leftBack" :titleStyle="{'color':'transparent'}">
			</u-navbar>
		</view>
		<view class="uni-margin-wrap pore">
			<image :src="api_host + ban.imageUrl" mode="widthFix" class="width100"></image>
			<view class="ban-logo">
				<view class="c343 f46">{{ban.title}}</view>
				<view class="c343 f32">{{ban.synopsis}}</view>
			</view>
		</view>
		<view class="ml30 mr30 content-box pore">
			<view class="bgFff p10 radius50 flex-jus" @click="nologinJump('/pages/search/index?type=food')">
				<u-search placeholder="输入你要找的美食" disabled v-model="keyword" disabled clearabled bgColor="#fff"
					:showAction="false"></u-search>
				<view>
					<u-button color="#FFDE6D" :customStyle="{'color':'#34314F','padding':'0 40rpx'}"
						shape="circle">搜索</u-button>
				</view>
			</view>
			<view class="mt20">
				<scroll-view scroll-x="true" class="scroll-X" v-if="menuList.length>0">
					<view class="menu-item" :class="{'active':nav_id == item.id}" v-for="(item,index) in menuList"
						:key="index" @click="menu_click(item)">
						<!-- nologinJump('/foodpages/food/list?id='+item.id+'&name='+item.title) -->
						<view class="menu-item-box">
							<view class="flex">
								<image :src="api_host + item.icon" mode="" style="width: 60rpx;height: 60rpx;"></image>
								<view class="c343 f28 bold">{{item.title}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<u-gap height="20"></u-gap>
			<!-- <view>
				<food-list :dataArray="listData"></food-list>
			</view> -->
			<view v-if="listData.length > 0">
				<waterfall-flow ref="water" :dataArray="listData"></waterfall-flow>
			</view>
		</view>
		<u-gap height="20"></u-gap>
		<view class="back-top pore">
			<u-back-top :scroll-top="scrollTop" bottom="200" :customStyle="{'backgroundColor':'#FFDE6D'}"
				:iconStyle="{'color':'#000','fontSize':'40rpx','fontWeight':'bold'}"></u-back-top>
		</view>
	</view>
</template>

<script>
	import foodList from '@/components/foodList/index.vue'
	import waterfallFlow from '@/components/waterfall-flow/index.vue'
	import {
		getFoodhome,
		getStorelist,
		getStorelist2
	} from '@/common/api_wan.js'
	import {
		getBanners
	} from '@/common/api_user.js'
	export default {
		components: {
			foodList,
			waterfallFlow
		},
		name: '',
		data() {
			return {
				scrollTop: 0,
				longitude: 115.082256,
				latitude: 30.205922,
				ban: {},
				nav_id: '',
				keyword: '',
				menuList: [],
				listData: [],
				pageNum: 1,
				lastPage: false,
			}
		},
		onLoad() {
			this.getBanners()

			// #ifdef MP-WEIXIN
			this.getLocation()
			// #endif
			// #ifdef H5
			this.getFoodhome()
			// #endif
		},
		mounted() {
			this.getFoodhome()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			console.log("到底了");
			if (this.lastPage) {
				this.pageNum += 1
				this.getStorelist2()
			}
		},
		methods: {
			async getBanners() {
				uni.showLoading({
					mask: true
				})
				const res = await getBanners({
					affiliation: '4'
				})
				if (res.code == 200) {
					this.ban = res.data[0]
				}
				uni.hideLoading()
			},
			menu_click(item) {
				this.listData = []
				this.nav_id = item.id
				this.pageNum = 1
				this.getStorelist2()
			},
			getLocation() {
				const that = this
				uni.getLocation({
					type: 'wgs84',
					success(res) {
						console.log(111, res);
						const {
							latitude,
							longitude
						} = res
						that.longitude = longitude
						that.latitude = latitude
						that.getFoodhome()
					},
					fail(err) {
						console.log(222, err);
					}
				})
			},
			async getFoodhome() {
				uni.showLoading({
					mask: true
				})
				const res = await getFoodhome({
					longitude: this.longitude,
					latitude: this.latitude
				})
				if (res.code == 200) {
					const {
						storeTypes,
						storeInfos
					} = res.data
					this.menuList = storeTypes
					this.nav_id = this.menuList[0].id
					this.getStorelist2()
					// this.listData = storeInfos.map(item => {
					// 	return {
					// 		...item,
					// 		imgs: item.images ? item.images.split(',') : []
					// 	}
					// })
				}
				uni.hideLoading()
			},
			async getStorelist2() {
				uni.showLoading({
					mask: true
				})
				const res = await getStorelist2({
					id: this.nav_id,
					longitude: this.longitude,
					latitude: this.latitude,
					pageSize: 5,
					pageNum: this.pageNum
				})
				if (res.code == 200) {
					this.lastPage = res.lastPage
					this.listData = this.listData.concat(res.data)
					let tempObject = {}
					this.listData = this.listData.reduce((item, next) => {
						// item为没有重复id的数组，next为当前对象
						tempObject[next.id] ? '' : (tempObject[next.id] = true && item.push(next));
						return item;
					}, [])
					this.listData = this.listData.map(item => {
						return {
							...item,
							imgs: item.images ? item.images.split(',') : []
						}
					})
					// this.listData = res.data.map(item => {
					// 	return {
					// 		...item,
					// 		imgs: item.images ? item.images.split(',') : []
					// 	}
					// })
				}
				uni.hideLoading()
			},
			/*计算距离*/
			getDistance(lat1, lng1, lat2, lng2) {
				lat1 = lat1 || 0;
				lng1 = lng1 || 0;
				lat2 = lat2 || 0;
				lng2 = lng2 || 0;

				var rad1 = lat1 * Math.PI / 180.0;
				var rad2 = lat2 * Math.PI / 180.0;
				var a = rad1 - rad2;
				var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				var r = 6378.137;
				var distance = r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) *
					Math.pow(Math.sin(b / 2), 2)));
				return distance.toFixed(2);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FEF4E8;
	}

	.ban-logo {
		position: absolute;
		top: 35%;
		left: 50rpx;
	}

	.content-box {
		margin-top: -80rpx;
	}

	.box_shadow {
		box-shadow: 0 10rpx 16rpx -10rpx #c1bfb4;
	}

	.scroll-X {
		white-space: nowrap;
	}

	.menu-item {
		padding: 20rpx 0 10rpx 0rpx;
		margin-right: 40rpx;
		display: inline-block;
	}

	.active {
		border-bottom: 8rpx solid #FFDE6D;
	}

	.menu-item:last-child {
		margin-right: 0;
	}
</style>